<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            width:100%;
        }
        tr{
            height:36px;
        }
    </style>
</head>
<body ng-controller="ctrl">
关键字：<input type="text" ng-model="keyword"/>
<button ng-show="isAsc" ng-click="sort();">价格升序</button>
<button ng-show="!isAsc" ng-click="sort();">价格降序</button>

<button ng-show="isAsc" ng-click="sort();">日期升序</button>
<button ng-show="!isAsc" ng-click="sort();">日期降序</button>
<table border="1">
    <thead>
    <tr>
        <th>名称</th>
        <th>价格</th>
        <th>上架时间</th>
        <th>上架时长(年)</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="g in goods | filter : keyword | orderBy : 'price' : isAsc">
        <td>{{g.name}}</td>
        <td>{{g.price | currency}}</td>
        <td>{{g.createTime | date : 'yyyy-MM-dd'}}</td>
        <td>{{g.createTime | yearFilter}}</td>
        <td>{{g.desc | descFilter : 8}}</td>
    </tr>
    </tbody>
</table>

<script src="lib/js/angular.js"></script>
<script>
    var app = angular.module('app',[]);

    app.filter('yearFilter' , function(){
        var now = new Date();
        return function(value){
            var sourceDate = new Date(value);
            return now.getFullYear() - sourceDate.getFullYear();
        };
    });

    app.filter('descFilter' , function(){
        return function(content , args){
            if(content.length > args){
                content = content.substring(0 , args) + '...';
            }
            return content;
        };
    });

    app.controller('ctrl' , function($scope){
        $scope.goods = [
            {name:'javascript' , price : 42.8 , createTime : 883779372091 , desc:'JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器'},
            {name:'HTML' , price : 12.8 , createTime : 1481079372091 , desc:'检测浏览器'},
            {name:'Java' , price : 56.8 , createTime : 1428079372091 , desc:'被数百万计的网页用来改进设计、验证表单、检测浏览器'},
            {name:'AngularJs' , price : 50.8 , createTime : 458179372091 , desc:'被数百万计的网页用来改进设计、验证表单、检测浏览器'},
        ];

        $scope.isAsc = true;

        $scope.sort = function(){
            $scope.isAsc = !$scope.isAsc;
        };
    });
</script>
</body>
</html>